<template>
	<wsPage title="系统概览">
		<div slot="page_operate">
			<Button type="ghost" @click="query"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<div>
			<Row>
				<Col span="6">{{'当天订单总数:'}}{{numForm.amount}}</Col>
				<Col span="6">{{'当天销售总额:'}}{{amountForm.amount}}</Col>
				<Col span="6">{{'昨天销售总额:'}}{{yesterdayForm.amount}}</Col>
				<Col span="6">{{'近7天销售总额:'}}{{weekForm.amount}}</Col>
		    </Row>
		</div>
		<div class="layout-content">
            <div class="layout-content-query">
				<Form :model="queryForm" :label-width="100" inline>
					<FormItem label="时间区间">
						<Row>
		                <Col span="11">
		                    <FormItem>
		                         <DatePicker type="date" :options="options" placeholder="查询开始时间" v-model="queryForm.startDate" @on-change="changeStartTime"></DatePicker>
		                    </FormItem>
		                </Col>
		                <Col span="2" style="text-align: center">-</Col>
		                <Col span="11">
		                    <FormItem prop="endDate">
		                        <DatePicker type="date" :options="options2" placeholder="查询结束时间" format="yyyy/MM/dd" v-model="queryForm.endDate" @on-change="changeEndTime"></DatePicker>
		                    </FormItem>
		                </Col>
		            </Row>      
			        </FormItem>
			        <FormItem>
			        	<Button type="primary" @click="onClick">搜索</Button>
			        </FormItem>
				</Form>
			</div>
			<div class="echarts">
	    		<!--<IEcharts :option="myChart" :loading="myChartLoading" @ready="onReady" @click="onClick"></IEcharts>-->
	  		</div>
	  		
        </div>
        <div class="layout-content">
			<div slot="query_form" class ="layout-content-query">
				<Form :model="querySaleForm" :label-width="100" inline>
					<FormItem label="时间区间">
						<Row>
		                <Col span="11">
		                    <FormItem prop="date">
		                        <DatePicker type="date" :options="options3" placeholder="查询开始时间" format="yyyy/MM/dd" v-model="querySaleForm.startDate" @on-change="changeStartTime2"></DatePicker>
		                    </FormItem>
		                </Col>
		                <Col span="2" style="text-align: center">-</Col>
		                <Col span="11">
		                    <FormItem prop="date">
		                        <DatePicker type="date" :options="options4" placeholder="查询结束时间" format="yyyy/MM/dd" v-model="querySaleForm.endDate" @on-change="changeEndTime2"></DatePicker>
		                    </FormItem>
		                </Col>
		            </Row>      
			        </FormItem>
			        <FormItem>
			        	<Button type="primary" @click="onClick2">搜索</Button>
			        </FormItem>
				</Form>
			</div>
	  		<div class="echarts">
	    		<!--<IEcharts :option="saleChart" @ready="onReady" @click="onClick"></IEcharts>-->
	  		</div>
	  		
			<!-- <div class="echarts">
	  			<IEcharts :option="bar" :loading="loading" @ready="onReady"></IEcharts>
	  		</div> -->
  	</div>
	</wsPage>
</template>

<script>
//	import IEcharts from 'vue-echarts-v3/src/full.vue';
	export default {
		components: {
//  		IEcharts
  		},
		data(){
			return {
				myChartLoading:true,
				saleChartLoading:true,
				//当天订单总量
				numForm:{
					createDate:null,
					amount:null
				},
				//当天销售总额
				amountForm:{
					createDate:'',
					amount:''
				},
				//前一天销售总额
				yesterdayForm:{
					createDate:null,
					amount:null
				},
				//7天的销售总额
				weekForm:{
					createDate:null,
					amount:null
				},
				//已支付订单总数
				myChart: {
			        title: {
			          text: '订单统计'
			        },
			        tooltip: {},
			        xAxis: {
			        	name: '日期',
				        data: []
			        },
			        yAxis: {
			        	name: '成交量/笔',
			        },
			        series: [{
			          name: 'sumNumber',
			          type: 'line',
			          data: []
			        }]
			    },
				//订单统计查询项
				queryForm:{
					startDate:null,
					endDate:null
				},
				//已支付订单总金额
				saleChart: {
			        title: {
			          text: '销售统计'
			        },
			        tooltip: {
			        },
			        xAxis: {
			            name: '日期',
				        data:[]
			        },
			        yAxis: {
			        	name: '总金额/元',
			        },
			        series: [{
			          name: 'sumAmount',
			          type: 'line',
			          data: []
			        }]
			    },
			    //销售统计查询项
			    querySaleForm:{
			    	startDate:null,
					endDate:null
			    }
			}
		},
		computed: {
		},
		mounted() {
			this.init();
		},
		methods: {
			init(){
				this.query();
			},
			query(){
				const _this = this;
				this.axios.get('/ws/ms/orderCensuss/num').then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						_this.numForm = res.data;
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('查询失败:' + message_);
					}
				});
				this.axios.get('/ws/ms/orderCensuss/amount').then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						if (res.data == null) {
							_this.amountForm.amount = 0;
						}else{
							_this.amountForm = res.data;
						}
						
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('查询失败:' + message_);
					}
				});
				this.axios.get('/ws/ms/orderCensuss/yesterday').then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						if (res.data == null) {
							_this.yesterdayForm.amount = 0;
						}else{
							_this.yesterdayForm = res.data;
						}	
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('查询失败:' + message_);
					}
				});
				this.axios.get('/ws/ms/orderCensuss/week').then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						if (res.data == null) {
							_this.weekForm.amount = 0;
						}else{
							_this.weekForm = res.data;
						}	
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('查询失败:' + message_);
					}
				});
			},
			queryNum(){
				const that = this;
		        let data = [];
		        let date_ = [];
				this.axios.post('/ws/ms/orderCensuss/condition',this.queryForm).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						for (var i = res.data.length - 1; i >= 0; i--) {
							data.push(res.data[i].amount);
							date_.push(res.data[i].createDate.substring(8,10));
						}
		        		that.myChart.series[0].data = data.reverse();
					 	that.myChart.xAxis.data = date_.reverse();
					 	that.myChartLoading = false;
					}else{
						let message_ = res.meta.message;
						that.$Message.warning('查询失败:' + message_);
					}
				});
			},
			
			queryAmount(){
				const _this = this;
				let xArray = [];
				let yArray = [];
				console.log(this.querySaleForm);
				this.axios.post('/ws/ms/orderCensuss/amountSum',this.querySaleForm).then(function(response) {
					let res = response.data;				
					if(0 === res.meta.code) {
						for (var i = res.data.length - 1; i >= 0; i--) {
							yArray.push(res.data[i].amount);
							xArray.push(res.data[i].createDate.substring(8,10));
						}
		        		_this.saleChart.series[0].data = yArray.reverse();
					 	_this.saleChart.xAxis.data = xArray.reverse();
					 	_this.saleChartLoading = false;
					}else{
						let message_ = res.meta.message;
						_this.$Message.warning('查询失败:' + message_);
					}
				});
			},
			onReady(){
				this.onClick();
				this.onClick2();
			},
			//订单统计查询
			onClick(){
				if (this.queryForm.startDate == null) {
					var date_=new Date();
 					date_.setDate(1);
 					this.queryForm.startDate = date_;
				}
				if (this.queryForm.endDate == null) {
					var endDate = new Date();
					endDate.setMonth(endDate.getMonth()+1);
					endDate.setDate(0);
					this.queryForm.endDate = endDate;
				}
				let days = this.queryForm.endDate.getTime() - this.queryForm.startDate.getTime();
				let dayNum = parseInt(days / (1000 * 60 * 60 * 24));
				if (dayNum>30) {
					this.$Notice.warning({
							title: '提醒',
							desc: '请选择一个月的时间区间',
							duration:15
						});
						return;			
				}else if(dayNum < 0){
					this.$Notice.warning({
							title: '提醒',
							desc: '查询开始时间不得晚于结束时间',
							duration:15
						});
						return;	
				}else{
					this.queryNum();
				}
				
			},
			//销售统计查询
			onClick2(){
				if (this.querySaleForm.startDate == null) {
					var date_=new Date();
 					date_.setDate(1);
 					this.querySaleForm.startDate = date_;
				}
				if (this.querySaleForm.endDate == null) {
					var endDate = new Date();
					endDate.setMonth(endDate.getMonth()+1);
					endDate.setDate(0);
					this.querySaleForm.endDate = endDate;
				}
				let days = this.querySaleForm.endDate.getTime() - this.querySaleForm.startDate.getTime();
				let dayNum = parseInt(days / (1000 * 60 * 60 * 24));
				if (dayNum>30) {
					this.$Notice.warning({
							title: '提醒',
							desc: '请选择一个月的时间区间',
							duration:15
						});
						return;			
				}else if(dayNum < 0){
					this.$Notice.warning({
							title: '提醒',
							desc: '查询开始时间不得晚于结束时间',
							duration:15
						});
						return;	
				}else{
					this.queryAmount();
				}
				
			},
			//查询时间段
			changeStartTime(date_) {
				this.queryForm.startDate = date_;
				this.startDate = date_;
			},
			changeEndTime(date_) {
				this.queryForm.endDate = date_;
				this.endDate = date_;
			},
			changeStartTime2(date_) {
				this.querySaleForm.startDate = date_;
			},
			changeEndTime2(date_) {
				this.querySaleForm.endDate = date_;
			},
			

		}
	}
</script>

<style>
  	  .echarts {
			    width: 90%;
			    height: 400px;
			    padding-bottom :30px;
			    /*height: 100%;*/
			  }
	  .layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-query{
    	float: right;
    }
</style>